<template>
<div class="col-md-12">
  <rd-widget>
    <rd-widget-header :header="header">
    </rd-widget-header>
    <rd-widget-body>
      <validator name="form">
        <form method="post">
          <div class="checkbox">
            <label>
              <input type="checkbox" v-model="form.enable" :true-value=1 :false-value=0> {{ $t("common.enable") }}
            </label>
          </div>
          <div class="form-group">
            <span>{{ $t("form.virtualIpaddr") }}</span>
            <input type="text" class="form-control" v-model="form.virtualIpaddr" v-validate:ipaddr="{ipn: true}">
            <strong class="text-danger my-error" v-if="$form.ipaddr.ipn">{{$t('error.invalidAddr')}}</strong>
          </div>
          <div class="form-group">
            <span>{{ $t("form.virtualIpNetmask") }}</span>
            <input type="text" class="form-control" v-model="form.virtualIpNetmask" v-validate:netmask="{ipn: true}">
            <label class="control-label text-danger" v-if="$form.netmask.ipn">{{$t('error.invalidAddr')}}</label>
          </div>
          <button type="button" class="btn btn-default" @click.prevent="onSubmit">{{ $t("common.save") }}</button>
        </form>
      </validator>
    </rd-widget-body>
  <rd-widget>
</div>
</template>

<script>
import _ from 'lodash'
import toast from 'libs/toast.js'
import msgbox from 'libs/msgbox.js'
import {clusterApi, shortcutApi} from 'share/server/api.js'
import locales from '../locales/clusterCfg.js'
import settings from 'share/server/settings.js'

export default {
  locales,
  data () {
    return {
      header: {
        icon: 'fa fa-edit',
        title: this.$t("title")
      },
      form: {
        enable: 0,
        virtualIpaddr: '',
        virtualIpNetmask: ''        
      }
    }
  },
  vuex: {
    getters: {
      licenseInfo: (state) => state.system.state.licenseInfo
    }
  },
  computed: {
    validLicense () {
      return this.licenseInfo.stateCode === 0 && this.licenseInfo.license.data.enableCluster === 1
    }
  },
  methods: {
    doSave: function(cfg) {
      clusterApi.setCfg(cfg).then(function(res) {
        if (res && res.data && res.data.code === 0) {
          msgbox.alert({
            title: this.$t('alert.saveSuccess'),
            text: this.$t('alert.needRestartDevice') + this.$t('alert.restartNow'),
            type: "success",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            cancelButtonText: this.$t('common.cancel'),
            confirmButtonText: this.$t('common.confirm'),
            closeOnConfirm: false,
            showLoaderOnConfirm: true    
          }, 
          function() {
            shortcutApi.reboot()
            setTimeout(function() {
              msgbox.close()
              location.reload(true)
            }, settings.rebootWaitTime)
          }.bind(this))          
        } else {
          toast.code(this, res.data)
        }
      }.bind(this))
    },
    onSubmit (e) {
      if (this.$form.invalid) {
        toast.e(this, this.$t('common.fail'), this.$t('error.params'))
        return
      }  
          
      if (this.form.enable) {
        if (this.form.virtualIpaddr === ''
          || this.form.virtualIpNetmask === '') {
          toast.e(this, this.$t('common.fail'), this.$t('error.params'))
          return
        }

        if (this.validLicense) {
          this.doSave(this.form)
        } else {
          msgbox.alert({
            title: this.$t('alert.areYouSure'),
            text: this.$t('alert.clusterWarning') + this.$t('common.and') + this.$t('alert.notBeRecovered'),
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            cancelButtonText: this.$t('common.cancel'),
            confirmButtonText: this.$t('common.confirm'),
            closeOnConfirm: false        
          }, 
          function() {
            this.doSave(this.form)
          }.bind(this))          
        }
      } else {
        this.doSave(this.form)
      }
    },
    loadData (data) {
      let clusterCfg = data

      _.forEach(this.form, (value, key, object) => {
        if (typeof clusterCfg[key] != 'undefined') {
          object[key] = clusterCfg[key]
        }
      })
    }
  },
  ready () {
    clusterApi.getCfg().then(function(res) {
      if (res && res.data && res.data.code === 0) {
        this.loadData(res.data.data)
      } else {
        toast.code(this, res.data)
      }
    }.bind(this))
  }
}
</script>

<style>
</style>